<template>
  <div>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="优惠券标题">
        <el-input v-model="queryParams.title" clearable placeholder="优惠券标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="openAddCoupon" >添加</el-button>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="couponId"
        label="优惠券唯一标识"
        width="150">
      </el-table-column>
      <el-table-column
        prop="title"
        label="优惠券标题"
        width="120">
      </el-table-column>
      <el-table-column
        prop="description"
        label="优惠券描述信息"
        width="120">
      </el-table-column>
      <el-table-column
        prop="discountValue"
        label="折扣具体数值"
        width="100">
      </el-table-column>
      <el-table-column
        prop="totalQuantity"
        label="优惠券总数量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="claimedQuantity"
        label="已领取数量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="isActive"
        label="优惠券是否有效"
        width="120">
        <template slot-scope="scope">
          {{scope.row.isActive==1?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="pic"
        label="优惠券图片存储路径"
        width="120">
        <template slot-scope="scope">
          <img :src="scope.row.pic" alt="" style="width: 100px;height: 100px">
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="deleteById(scope.row.couponId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="goSize"
      @current-change="goPage"
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="添加优惠卷" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠卷名称" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="折扣类型"  :label-width="formLabelWidth">
              <el-radio-group v-model="form.discountType">
                <el-radio
                  v-for="dict in typeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠卷满值" v-if="form.discountType==0" :label-width="formLabelWidth">
                <el-input v-model="form.diminutionValue" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="优惠券描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="折扣具体数值" v-if="form.discountType==1"  :label-width="formLabelWidth">
              <template>
                <el-input-number v-model="form.discountValue" :precision="2" :step="0.01" :max="1"></el-input-number>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠卷数量" :label-width="formLabelWidth">
              <el-input v-model="form.totalQuantity" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="优惠卷图片" :label-width="formLabelWidth">
              <el-upload
                class="avatar-uploader"
                action="http://localhost/dev-api/car/coupon/uploader"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="直减金额" v-if="form.discountType!=1" :label-width="formLabelWidth">
                <el-input v-model="form.lapseValue" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addConPon">确 定</el-button>
      </div>
    </el-dialog>

<!--    优惠券详情 -->
    <el-dialog title="优惠券详情" :visible.sync="dialogDetailVisible" width="700px" append-to-body>
        <el-form ref="detail" :model="detail" label-width="100px" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠券标题：">{{ detail.title }}</el-form-item>
              <el-form-item label="优惠券描述信息：">{{ detail.description }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="折扣类型：">
                <div v-if="form.discountType === 0">固定金额</div>
                <div v-if="form.discountType === 1">折扣券</div>
                <div v-if="form.discountType === 2">直减券</div></el-form-item>
              <el-form-item v-if="form.discountType === 1" label="折扣具体数值：">{{ detail.discountValue }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDetailVisible = false">关 闭</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
import { getCouponList ,addConpon ,deleteById  } from "@/api/car/coupon";
export default {
  name: "index",
  data() {
    return {
      tableData:[],
      queryParams:{
        title:'',
        current:1,
        size:4,
      },
      num:0,
      total:0,
      dialogFormVisible:false,
      formLabelWidth:"120px",
      form:{
        discountType:0,
      },
      imageUrl:'',
      typeOptions:[],
      dialogDetailVisible:false,
      detail:{},
    }
  }, methods: {
    openAddCoupon(){
       this.form={
         discountType:0,
       }
       this.dialogFormVisible=true;
    },
    goSize(size){
      this.queryParams.size=size;
      this.getTableData();
    },
    goPage(current){
      this.queryParams.current=current;
      this.getTableData();
    },
    getTableData(){
      getCouponList(this.queryParams).then(res=>{
        this.tableData=res.data.list;
        this.total = res.data.total;
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.form.pic=this.imageUrl;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //添加
    addConPon(){
        addConpon(this.form).then(res=>{
          if(res.code==200){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.getTableData();
            this.dialogFormVisible=false;
          }else{
            this.$message({
              message: '添加失败',
              type: 'error'
            });
            this.getTableData();
          }
        })
    },
    deleteById(id){
      this.$confirm('此操作将永久删除'+id+'文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deleteById(id).then(res=>{
        if(res.code==200){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getTableData();
        }else{
          this.$message({
            message: '删除失败',
            type:'error'
          })
        }
      })
    })
    },
    details(row){
      this.dialogDetailVisible=true;
      this.detail=row;
      console.log(details)
    }
  }, created() {
    this.getTableData();
    this.getDicts('sys_discount_type').then(res=>{
        this.typeOptions=res.data;
        console.log("typeOptions",this.typeOptions)
    });
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
